<template>
    <div>
        <div class="page-header">
            <slot></slot>
        </div>
        <div class="page-content">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <Table border ref="selection" :columns="columns4" :data="data1"></Table>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12"></Col>
                <Col span="12">
                    <Page :total="totalPage" show-total />
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
export default {
  name: 'LyxContent',
  props: {
    type: {
      type: Number
    },
    param: {
      type: Array
    }
  },
  mounted () {
    this.init()
  },
  data () {
    return {
      columns4: [],
      data1: [],
      totalPage: 0
    }
  },
  methods: {
    init () {
      if (this.type === 1) {
        this.areaFun()
      }
      if (this.type === 2) {
        this.dieFun()
      }
      if (this.type === 3) {
        this.anZangFun()
      }
      if (this.type === 4) {
        this.huoHuaFun()
      }
    },
    areaFun () {
      let header = [{ title: '日期', key: 'date' }, { title: '区县', key: 'area' }, { title: '人数', key: 'people' }]
      let data = [{ date: '2019-01-03', area: '大东区', people: 36 }, { date: '2019-02-02', area: '铁西区', people: 55 },
        { date: '2019-03-03', area: '沈河区', people: 100 }, { date: '2019-04-04', area: '沈北新区', people: 60 },
        { date: '2019-05-02', area: '铁西区', people: 19 }, { date: '2019-06-06', area: '大东区', people: 80 },
        { date: '2019-10-02', area: '于洪区', people: 26 }]
      /* for (let i = 0; i < 30; i++) {
        data.push({ date: '2019-01-02', area: '大东区' + i, people: 10 })
      } */
      let _this = this
      if (this.param.length > 0) {
        data = data.filter(e => {
          let p1 = true
          let p2 = true
          if (_this.param[0] !== '' && e.date !== _this.param[0]) {
            p1 = false
          }
          if (_this.param[1] !== '' && e.area !== _this.param[1]) {
            p2 = false
          }
          return p1 && p2
        })
      }
      let list = []
      let num = data.length > 10 ? 10 : data.length
      for (let j = 0; j < num; j++) {
        list[j] = data[j]
      }
      this.columns4 = header
      this.data1 = list
      this.totalPage = data.length
    },
    dieFun () {
      let header = [{ title: '死亡原因', key: 'cause' }, { title: '区县', key: 'area' }, { title: '人数', key: 'people' }]
      let data = [{ cause: '火灾', area: '大东区', people: 10 }, { cause: '自杀', area: '沈北新区', people: 1 },
        { cause: '溺水', area: '铁西区', people: 5 }, { cause: '自杀', area: '沈河区', people: 1 },
        { cause: '车祸', area: '沈河区', people: 10 }, { cause: '车祸', area: '铁西区', people: 20 },
        { cause: '火灾', area: '沈河区', people: 10 }]
      /* for (let i = 0; i < 30; i++) {
        data.push({ cause: '烧死的' + i, area: '大东区', people: 10 })
      } */
      // 数据过滤
      let _this = this
      if (this.param.length > 0) {
        data = data.filter(e => {
          let p1 = true
          let p2 = true
          if (_this.param[0] !== '' && e.cause !== _this.param[0]) {
            p1 = false
          }
          if (_this.param[1] !== '' && e.area !== _this.param[1]) {
            p2 = false
          }
          return p1 && p2
        })
      }

      let list = []
      let num = data.length > 10 ? 10 : data.length
      for (let j = 0; j < num; j++) {
        list[j] = data[j]
      }
      this.columns4 = header
      this.data1 = list
      this.totalPage = data.length
    },
    anZangFun () {
      let header = [{ title: '安葬方式', key: 'style' }, { title: '区县', key: 'area' }, { title: '人数', key: 'people' }]
      let data = [{ style: '火葬', area: '大东区', people: 10 }, { style: '火葬', area: '沈北新区', people: 10 },
        { style: '土葬', area: '大东区', people: 5 }, { style: '火葬', area: '大东区', people: 15 },
        { style: '火葬', area: '铁西区', people: 19 }, { style: '海葬', area: '铁西区', people: 6 },
        { style: '土葬', area: '沈河区', people: 1 }]
      /* for (let i = 0; i < 30; i++) {
        data.push({ style: '火葬' + i, area: '大东区', people: 10 })
      } */
      console.log(this.param)
      let _this = this
      if (this.param && this.param.length > 0) {
        data = data.filter(e => {
          let p1 = true
          let p2 = true
          if (_this.param[0] !== '' && e.style !== _this.param[0]) {
            p1 = false
          }
          if (_this.param[1] !== '' && e.area !== _this.param[1]) {
            p2 = false
          }
          return p1 && p2
        })
      }

      let list = []
      let num = data.length > 10 ? 10 : data.length
      for (let j = 0; j < num; j++) {
        list[j] = data[j]
      }
      this.columns4 = header
      this.data1 = list
      this.totalPage = data.length
    },
    huoHuaFun () {
      let header = [{ title: '单位', key: 'work' }, { title: '人数', key: 'people' }]
      let data = [{ work: '安详火葬有限公司', people: 20 }, { work: '幸福人生有限公司', people: 15 },
        { work: '天堂有限公司', people: 50 }, { work: '天堂有限公司', people: 50 },
        { work: '安详海葬有限公司', people: 40 }, { work: '天泉有限公司', people: 30 },
        { work: '安详泉园有限公司', people: 40 }]
      /*  for (let i = 0; i < 30; i++) {
        data.push({ work: '安详火葬有限公司' + i, people: 10 })
      } */
      let _this = this
      if (this.param && this.param.length > 0) {
        data = data.filter(e => {
          let p1 = true
          if (_this.param[0] !== '' && e.work !== _this.param[0]) {
            p1 = false
          }
          return p1
        })
      }
      let list = []
      let num = data.length > 10 ? 10 : data.length
      for (let j = 0; j < num; j++) {
        list[j] = data[j]
      }
      this.columns4 = header
      this.data1 = list
      this.totalPage = data.length
    },
    getParam () {
      return this.param.filter(e => {
        return e !== ''
      })
    }
  },
  watch: {
    param () {
      this.init()
    }
  }
}

</script>

<style scoped>
    .page-header{
        margin-bottom: 20px;
    }
    .lyx-mr10{
        margin-right: 10px;
    }
    .lyx-mb10{
        margin-bottom: 10px;
    }
</style>
